<template>
    <view class="w-[750rpx] min-h-screen bg-gray-50">
        <!-- Header -->
        <view class="bg-white px-[32rpx] py-[24rpx] shadow-sm flex items-center">
            <IconFont name="left" size="24" class="text-gray-600 mr-[16rpx]" @click="goBack" />
            <text class="text-[32rpx] font-bold text-gray-800">子功能 1-1</text>
        </view>

        <!-- Tab Navigation -->
        <view class="bg-white px-[32rpx] py-[16rpx] border-b border-gray-100">
            <view class="flex">
                <view v-for="tab in tabs" :key="tab.id" class="flex-1 text-center py-[16rpx]"
                    :class="activeTab === tab.id ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-600'"
                    @click="switchTab(tab.id)">
                    <text class="text-[28rpx]">{{ tab.title }}</text>
                </view>
            </view>
        </view>

        <!-- Content -->
        <view class="p-[32rpx]">
            <!-- Tab Content 1 -->
            <view v-if="activeTab === 1">
                <view class="space-y-[24rpx]">
                    <view v-for="item in listItems" :key="item.id" class="bg-white rounded-[16rpx] p-[32rpx] shadow-sm"
                        @click="handleItemClick(item)">
                        <view class="flex items-center justify-between">
                            <view class="flex-1">
                                <text class="text-[32rpx] font-bold text-gray-800 block">{{ item.title }}</text>
                                <text class="text-[24rpx] text-gray-500 mt-[8rpx]">{{ item.subtitle }}</text>
                                <view class="flex items-center mt-[16rpx]">
                                    <text class="text-[24rpx] text-blue-500 mr-[16rpx]">{{ item.status }}</text>
                                    <text class="text-[24rpx] text-gray-400">{{ item.time }}</text>
                                </view>
                            </view>
                            <view class="w-[120rpx] h-[80rpx] bg-gray-100 rounded-[8rpx] ml-[24rpx]">
                                <image :src="item.image" class="w-full h-full rounded-[8rpx]" mode="aspectFill" />
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- Tab Content 2 -->
            <view v-if="activeTab === 2">
                <view class="grid grid-cols-2 gap-[24rpx]">
                    <view v-for="card in cardItems" :key="card.id" class="bg-white rounded-[16rpx] p-[24rpx] shadow-sm"
                        @click="handleCardClick(card)">
                        <view class="text-center">
                            <IconFont :name="card.icon" size="48" class="text-blue-500 mb-[16rpx]" />
                            <text class="text-[28rpx] font-bold text-gray-800 block">{{ card.title }}</text>
                            <text class="text-[24rpx] text-gray-500 mt-[8rpx]">{{ card.count }}</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- Tab Content 3 -->
            <view v-if="activeTab === 3">
                <view class="bg-white rounded-[16rpx] p-[32rpx]">
                    <text class="text-[32rpx] font-bold text-gray-800 block mb-[24rpx]">详细信息</text>
                    <view class="space-y-[16rpx]">
                        <view v-for="detail in detailItems" :key="detail.id"
                            class="flex justify-between py-[16rpx] border-b border-gray-100 last:border-b-0">
                            <text class="text-[28rpx] text-gray-600">{{ detail.label }}</text>
                            <text class="text-[28rpx] text-gray-800">{{ detail.value }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- Bottom Action -->
        <view class="fixed bottom-0 left-0 right-0 bg-white p-[32rpx] shadow-lg">
            <view class="flex gap-[24rpx]">
                <view class="flex-1 bg-gray-100 text-center py-[24rpx] rounded-[12rpx]" @click="handleSecondaryAction">
                    <text class="text-[28rpx] text-gray-600">次要操作</text>
                </view>
                <view class="flex-1 bg-blue-500 text-center py-[24rpx] rounded-[12rpx]" @click="handlePrimaryAction">
                    <text class="text-[28rpx] text-white">主要操作</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'

interface Tab {
    id: number
    title: string
}

interface ListItem {
    id: number
    title: string
    subtitle: string
    status: string
    time: string
    image: string
}

interface CardItem {
    id: number
    title: string
    icon: string
    count: string
}

interface DetailItem {
    id: number
    label: string
    value: string
}

const activeTab = ref(1)

const tabs = ref<Tab[]>([
    { id: 1, title: '列表' },
    { id: 2, title: '卡片' },
    { id: 3, title: '详情' }
])

const listItems = ref<ListItem[]>([
    {
        id: 1,
        title: '项目标题一',
        subtitle: '这是项目的详细描述信息',
        status: '进行中',
        time: '2小时前',
        image: '/src/assets/imgs/none.png'
    },
    {
        id: 2,
        title: '项目标题二',
        subtitle: '这是项目的详细描述信息',
        status: '已完成',
        time: '1天前',
        image: '/src/assets/imgs/none.png'
    }
])

const cardItems = ref<CardItem[]>([
    { id: 1, title: '统计一', icon: 'chart', count: '128' },
    { id: 2, title: '统计二', icon: 'data', count: '256' },
    { id: 3, title: '统计三', icon: 'trend', count: '64' },
    { id: 4, title: '统计四', icon: 'report', count: '32' }
])

const detailItems = ref<DetailItem[]>([
    { id: 1, label: '创建时间', value: '2024-01-15' },
    { id: 2, label: '更新时间', value: '2024-01-20' },
    { id: 3, label: '状态', value: '正常' },
    { id: 4, label: '类型', value: '标准类型' }
])

const goBack = () => {
    Taro.navigateBack()
}

const switchTab = (tabId: number) => {
    activeTab.value = tabId
    Taro.showToast({
        title: `切换到${tabs.value.find(t => t.id === tabId)?.title}`,
        icon: 'success',
        duration: 1000
    })
}

const handleItemClick = (item: ListItem) => {
    Taro.showToast({
        title: `点击了${item.title}`,
        icon: 'success',
        duration: 1500
    })
}

const handleCardClick = (card: CardItem) => {
    Taro.showToast({
        title: `查看${card.title}`,
        icon: 'success',
        duration: 1500
    })
}

const handlePrimaryAction = () => {
    Taro.showToast({
        title: '执行主要操作',
        icon: 'success',
        duration: 1500
    })
}

const handleSecondaryAction = () => {
    Taro.showToast({
        title: '执行次要操作',
        icon: 'success',
        duration: 1500
    })
}
</script>